<template>
  <div class="stock-delivery">
    <d2-container type="card" betterScroll class="aside-container">
      <el-form
        class="query-form"
        :label-position="'top'"
        label-width="80px"
        :model="queryForm"
        ref="queryForm"
        @submit.native.prevent="handleSubmitQuery"
      >
        <el-form-item>
          <el-button type="ghost" size="small" @click="handleResetQuery"
            >重置</el-button
          >
          <el-button
            native-type="submit"
            size="small"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item label="发货单号" prop="billNo">
          <el-input
            placeholder="请输入发货单号搜索"
            v-model="queryForm.billNo"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            style="width: 198px"
            v-model="queryForm.status"
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货类型" prop="sendType">
          <el-select
            size="small"
            style="width: 198px"
            v-model="queryForm.sendType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收件人" prop="consignee">
          <el-input
            placeholder="请输入收件人搜索"
            v-model="queryForm.consignee"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="收件电话" prop="consigneeMobile">
          <el-input
            placeholder="请输入收件电话搜索"
            v-model="queryForm.consigneeMobile"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTimeStart">
          <el-date-picker
            size="small"
            style="width: 198px"
            v-model="queryForm.createTimeStart"
            align="right"
            placeholder="开始日期"
            :picker-options="pickerOptions"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="createTimeEnd">
          <el-date-picker
            size="small"
            style="width: 198px"
            v-model="queryForm.createTimeEnd"
            align="right"
            placeholder="结束日期"
            :picker-options="pickerOptions"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发货时间" prop="sendTimeStart">
          <el-date-picker
            size="small"
            style="width: 198px"
            v-model="queryForm.sendTimeStart"
            align="right"
            placeholder="开始日期"
            :picker-options="pickerOptions"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="sendTimeEnd">
          <el-date-picker
            size="small"
            style="width: 198px"
            v-model="queryForm.sendTimeEnd"
            align="right"
            placeholder="结束日期"
            :picker-options="pickerOptions"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </d2-container>
    <d2-container class="main-container">
      <template slot="header">
        <div class="header-title">发货单</div>
        <el-row>
          <el-col :span="1">
            <el-upload
              class="upload-demo"
              action="/api/store/stock/importLogistics"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :headers="uploadHeader"
              :before-upload="handleBeforeUpload"
            >
              <el-button :loading="uploading" type="text" size="small"
              >导入签出<i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </el-upload>
          </el-col>
          <el-col :span="3" style="margin-top: 6px;">
            <el-link
              type="primary"
              href="https://shanzmoo.oss-cn-hangzhou.aliyuncs.com/shanzmoo/mall/file/%E5%AF%BC%E5%85%A5%E7%AD%BE%E5%87%BA%E6%A8%A1%E6%9D%BF.xlsx"
              style="margin-left: 50px; font-size: 12px;"
            >导入签出模板<i class="el-icon-download el-icon--right" />
            </el-link>
          </el-col>
        </el-row>
      </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        size="small"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              size="small"
              :data="props.row.detailList"
              stripe
              border
              style="width: 100%"
            >
              <el-table-column header-align="center" prop="sku" label="sku">
              </el-table-column>
              <el-table-column
                header-align="center"
                prop="storeCode"
                label="仓库车位"
              >
              </el-table-column>
              <el-table-column
                header-align="center"
                prop="skuName"
                label="商品名称"
              >
              </el-table-column>
              <el-table-column
                header-align="center"
                prop="skuNum"
                label="库存数量"
              >
              </el-table-column>
              <el-table-column header-align="center" prop="unit" label="单位">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="发货单号" prop="billNo"> </el-table-column>
        <el-table-column label="状态" prop="status">
          <div slot-scope="{ row }">
            {{ statusOptions.filter((so) => so.value === row.status)[0].label }}
          </div>
        </el-table-column>
        <el-table-column label="发货类型" prop="sendType">
          <div slot-scope="{ row }">
            {{ typeOptions.filter((to) => to.value === row.sendType)[0].label }}
          </div>
        </el-table-column>
        <el-table-column label="收件人" prop="consignee"> </el-table-column>
        <el-table-column label="收件人电话" prop="consigneeMobile">
        </el-table-column>
        <el-table-column label="物流单号" prop="logisticsNo"> </el-table-column>
        <el-table-column label="物流公司" prop="logisticsCompany">
        </el-table-column>
        <el-table-column label="发货时间" prop="sendTime"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.status === 0"
              type="danger"
              size="small"
              @click="handleCancel(row)"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="queryForm.pageNum"
        :page-size="queryForm.pageSize"
        :total="total"
        background
        layout="total, prev, pager, next"
      >
      </el-pagination>
    </d2-container>
  </div>
</template>

<script>
import api from '@/api'
import cookies from "@/libs/util.cookies";
export default {
  name: 'stock-delivery',
  data() {
    return {
      uploading: false,
      uploadHeader: {
        Authorization: cookies.get('token'),
      },
      total: 0,
      loading: false,
      queryDate: '',
      queryForm: {
        billNo: '',
        consignee: '',
        consigneeMobile: '',
        createTimeEnd: '',
        createTimeStart: '',
        originOrder: '',
        pageNum: 1,
        pageSize: 10,
        sendTimeEnd: '',
        sendTimeStart: '',
        sendType: '',
        status: '',
      },
      statusOptions: [
        {
          value: 0,
          label: '待确认',
        },
        {
          value: 1,
          label: '待发货',
        },
        {
          value: 2,
          label: '已发货',
        },
        {
          value: 9,
          label: '已取消',
        },
      ],
      typeOptions: [
        {
          value: 0,
          label: '物流',
        },
        {
          value: 1,
          label: '自提',
        },
        {
          value: 2,
          label: '平台仓'
        },
      ],
      pickerOptions: {
        // shortcuts: [
        //   {
        //     text: '今天',
        //     onClick(picker) {
        //       picker.$emit('pick', new Date())
        //     },
        //   },
        //   {
        //     text: '昨天',
        //     onClick(picker) {
        //       const date = new Date()
        //       date.setTime(date.getTime() - 3600 * 1000 * 24)
        //       picker.$emit('pick', date)
        //     },
        //   },
        //   {
        //     text: '一周前',
        //     onClick(picker) {
        //       const date = new Date()
        //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
        //       picker.$emit('pick', date)
        //     },
        //   },
        // ],
      },
      tableData: [],
    }
  },
  created() {
    this.fetchStockDeliveryList()
  },
  methods: {
    handleCancel(row) {
      console.log(row)
      this.$prompt('确认取消发货单？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        inputPlaceholder: '请输入取消原因',
        inputValidator: (value) => {
          if (value) {
            return true
          }
          return '请输入取消原因'
        },
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            console.log(instance.inputValue)
            api
              .STOCK_DELIVERY_CANCEL({
                id: row.id,
                cancelReason: instance.inputValue,
              })
              .then(() => {
                done()
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                  this.fetchStockDeliveryList()
                }, 300)
              })
              .catch(() => {
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                }, 300)
              })
          } else {
            done()
          }
        },
      }).then(() => {
        this.$message.success('操作成功')
      })
    },
    handleSubmitQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.fetchStockDeliveryList()
        } else {
          return false
        }
      })
    },
    handleResetQuery() {
      this.$refs['queryForm'].resetFields()
    },
    fetchStockDeliveryList() {
      this.loading = true
      const query = Object.assign({}, this.queryForm, {
        createTime: this.queryForm.queryDate ? this.queryForm.queryDate[0] : '',
        endTime: this.queryForm.queryDate ? this.queryForm.queryDate[1] : '',
      })
      api
        .STOCK_DELIVERY_LIST(query)
        .then((response) => {
          this.loading = false
          this.tableData = response.list
          this.total = response.totalCount
          this.queryForm.pageNum = response.currPage
          this.queryForm.pageSize = response.pageSize
        })
        .catch(() => {
          this.loading = false
        })
    },
    handleBeforeUpload() {
      this.uploading = true
    },
    uploadSuccess(res) {
      this.uploading = false
      if (res.ok) {
        this.$message.success('上传成功')
        this.fetchStockList()
      } else {
        this.$message.error(res.errmsg)
      }
    },
    uploadError() {
      this.uploading = false
      this.$message.error('上传失败')
    }
  }
}
</script>

<style lang="scss">
.stock-delivery {
  height: 100%;
  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
.aside-container {
  .query-form {
    .el-form-item__content {
      text-align: center;
    }
  }
}
</style>
